<template>
  <div class="finished">
        <ul class="finished-title">
            <li class="tab-title" v-for="item of titleList" :key="item.id">{{ item.titlename }}</li>
        </ul>

        <ul class="finished-table" v-for="item of tableList">
           <li class="tab-border" v-for="item of borderList"></li>
        </ul>  
        
        <div class="finished-data-wrapper">
          <ul class="finished-data" v-for="item of list" :key="item.id">
               <li class="tab-content" >{{item.machine}}</li>
               <li class="tab-content" >{{item.finishedcount}}</li>
          </ul>
        </div>
    
  </div>
</template>

<script>
export default {
  props:{
    list:Array
  },  
  data () {
    return {
        titleList:[
           {
            id:"0001",
            titlename:"型号"
           },
           {
            id:"0002",
            titlename:"完成数量(实时)"
           }
        ],
        borderList:["1","2"],
        tableList:["1","2","3","4","5","6","7","8"]
        // list:[
       //      {
       //       id:"000001",
       //       machine:"33sss",
       //       finishedcount:"2018/0607"
       //      }

        // ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
.finished{
    width:266px;
    height:486px;
    position:relative;
}

.finished-title{
  height:54px;
  border:1px solid #26aab7;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-sizing:border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
    
.tab-title{
  width:100px;
  height:54px;
  line-height:54px;
  text-align:center;
  border-right:1px solid #26aab7;
  box-sizing:border-box;
}

.tab-title:last-child{
  width:166px;
  border:none;
}

.finished-table{
  width: 100%;
  height: 54px;
  border-left: 1px solid #26aab7;
  border-right: 1px solid #26aab7;
  border-bottom: 1px solid #26aab7;
  box-sizing:border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.finished-table li{
      height: 54px;
    line-height:54px;
    width: 100px;
    border-right: 1px solid #26aab7;
    box-sizing:border-box;
    text-align:center;
}

.finished-table li:last-child{
     border:none;
     width:166px;
 }
 

.finished-table:nth-child(9){
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}


.tab-title{
  font-size:24px;
  color:#fff;
}

.tab-content{
  font-size:24px;
  color:#26aab7;
}

.finished-data-wrapper{
  width:100%;
  height:432px;
  overflow:hidden;
  position:absolute;
  top:54px;
}
.finished-data{
  width:100%;
  height:54px;
  box-sizing:border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
    
.finished-data li{
    height: 54px;
    line-height:54px;
    width: 100px;
    box-sizing:border-box;
    text-align:center;
}
      
.finished-data li:last-child{
      width:166px; 
}
</style>